<template>
    <div class="box">
        <!-- <div class="list">
            <div v-for="(item,index) in tableData" :key="index" @dragstart="tuidon" @dragenter="jinru" @dragend="stop"  draggable="true" class="list-item">
                {{ item.index }}
            </div>
            
        </div> -->
        <div ref="parent" class="boxBg">
            <div class="number" :key="index" v-for="(element, index) in list1" :index="index">
                <div>
                    {{list2[index].title}}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useDragAndDrop } from 'fluid-dnd/vue';
import { forEach } from 'lodash-es';
import { ref,onMounted } from "vue"
import api from './plugin/pluginAdmin/api'
const list1 = ref([]);
const list2 = ref([]);
const [ parent ] = useDragAndDrop(list1, { direction: "horizontal" });
const tableData = ref([
    {
       
        index:0,
    },
    {
  
        index:1,
    },
    {
  
        index:2,
    },
    {
       
        index:3,
    },
    {
    
        index:4,
    },
])

onMounted(() => {
    List();
});
const list = document.querySelector('.list')
const source:any = ref<HTMLElement | null>(null);
const tuidon = (e) =>{
    setTimeout(()=>{
        e.target.classList.add('moving')
    },0)
    console.log(e)
    source.value = e.target
}
const params = ref({
  pageNum: 1,
  pageSize: 200,
  keyword: '',
  plugin_id:'all'
})
async function List() {
  try {
    const res: any = await api.ListApi(params.value)
    if (res.code == 200) {
        res.data.list.forEach((item,index)=>{
            list1.value.push(index)
        })
        list2.value = res.data.list
    }
  }
  catch (error) {
    console.error(error)
  }
}

const jinru = (e) =>{
    
    if(!source.value) return
   
    // 判断如果是拖动执行自身  避免拖动进入父亲元素或者本身执行下面逻辑
    if(e.target === list || e.target === source.value)
    return
    
    const sourceIndex = source.value.innerHTML;
    // 获取拖拽的第几个元素
    const targetIndex = e.target.innerHTML;

    if(sourceIndex<targetIndex){
        console.log("向下")
        const NEW = source.value; // 拖动元素
        console.log(NEW.innerHTML)
        tableData.value[sourceIndex].index = targetIndex
        tableData.value[targetIndex].index = sourceIndex
        // list.insertBefore(e.target,source.value); // 把目标元素放到拖动元素里面
    }else{
        tableData.value[sourceIndex].index = targetIndex
        tableData.value[targetIndex].index = sourceIndex
        console.log("向上")
        // list.insertBefore(source.value,e.target);
    }
 
}

const stop = (e) =>{
    // 获取拖拽的下标
    e.target.classList.remove('moving')
    source.value = null
}

</script>

<style>
.box{
    height: 900px;
    overflow-y: scroll;
}
.boxBg{
        display: grid;
        /* grid-template-columns: repeat(5, 1fr);    */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        /* grid-auto-rows: 200px; */
        gap: 20px;
        margin: 20px 0;
    
        
    }
.number{
    height: 300px;
    width: 300px;
    border-radius: 8px;
    background: #3d80cc;
    color: white;
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.number-list {
  display: flex;
  flex-wrap: wrap;
  gap:12px;
}
.list{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}
.list-item{
    height: 120px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 32px;
    color: white;
    background: #3d80cc;
}
.moving{    
    background: #ccc;
}

</style>
